<template>
  {{ num }}
  <button @click="add">点击num++</button>
  <hr />
  <div>我的姓名：{{ person.name }}</div>
  <div>我的职业：{{ person.job }}</div>
  <div>我的性别：{{ person.sex }}</div>
  <div>我的爱好:{{ person.hobbies }}</div>
  <button @click="changePeron">改变自己</button>
  <div>------------------child组价------------------------</div>
  <Child :msg="msg" />
  <div v-if="loading">加载中。。。。。。。。</div>
  <div v-else-if="err">err:{{ err }}</div>
  <div v-else>
    <ul>
      <li>id:{{ data.id }}</li>
      <li>address:{{ data.address }}</li>
      <li>distance:{{ data.distance }}</li>
    </ul>
    <hr />
    <ul v-for="item in data" :key="item.id">
      <li>id:{{ item.id }}</li>
      <li>title:{{ item.title }}</li>
      <li>price:{{ item.price }}</li>
    </ul>
    <input type="text" name="" id="" ref="inputRef" />
    <hr />
    <input type="text" name="" id="" v-model="keyWord" />
    <div>{{ keyWord }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref, watch } from "vue";
import Child from "./components/Child.vue";
import request from "./request";

export default defineComponent({
  name: "App",
  components: {
    Child,
  },
  // vue2
  // data() {
  //   return {
  //     num: 0,
  //   };
  // },
  // methods: {
  //   add() {
  //     this.num++;
  //   },
  // },
  // vue3
  setup() {
    let msg = ref("hello");
    let num = ref(0);
    const person = reactive({
      name: "李淑敏",
      job: "前端开发工程师",
      sex: "女",
      hobbies: {
        sing: "告五人乐队",
      },
    });
    function add() {
      num.value++;
      console.log(num);
    }

    const changePeron = () => {
      person.name = "李世民";
      person.hobbies.sing = "棱镜";
    };
    //发送请求
    interface IAddress {
      id: number;
      address: string;
      distance: string;
    }
    interface IProduct {
      id: number;
      title: string;
      price: string;
    }
    // const { loading, data, err } = request<IAddress>("/address.json");
    const { loading, data, err } = request<IProduct[]>("/product.json");
    watch(data, () => {
      console.log(data.value);
    });
    const inputRef = ref<HTMLElement | null>(null);
    onMounted(() => {
      console.log("000000");

      inputRef.value && inputRef.value.focus(); //自动获取
    });
    function useDebounceRef() {
      let timeOutId: number;
      return;
    }
    let keyWord = ref("abc");
    return {
      msg,
      num,
      add,
      person,
      changePeron,
      loading,
      data,
      err,
      inputRef,
      keyWord,
    };
  },
});
</script>
